<template>
  <div class="o-formatter-setting">
    <div class="input">
      <span v-if="showTitle">
        <!-- 字段数据类型 -->
        {{ $srv.getI18nByPath('piece.oFormatterSetting.fielddatatype') }}:
      </span>
      <Select
        :disabled="disabled"
        clearable
        v-model="config.type"
        @on-change="libDetailDataChange"
        :placeholder="placeholder"
      >
        <Option
          v-for="item in formatList"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
    </div>
    <div
      class="formatter-decnum"
      v-show="
        ['number', 'percent', 'currency', 'custom'].indexOf(config.type) > -1
      "
    >
      <span
        >{{
          $srv.getI18nByPath('piece.oFormatterSetting.decimalplaces')
        }}:</span
      >
      <InputNumber
        @on-blur="libDetailDataChange"
        @on-change="libDetailDataChange"
        v-model="config.decimal"
        :max="6"
        :min="0"
      ></InputNumber>
    </div>
    <div
      class="formatter-spliter"
      v-show="['number'].indexOf(config.type) > -1"
    >
      <span
        >{{
          $srv.getI18nByPath('piece.oFormatterSetting.usethousandsseparator')
        }}:</span
      >
      <Checkbox
        @on-change="libDetailDataChange"
        v-model="config.thousandmark"
      ></Checkbox>
    </div>
    <div
      class="formatter-currency"
      v-show="['currency'].indexOf(config.type) > -1"
    >
      <span
        >{{
          $srv.getI18nByPath('piece.oFormatterSetting.currencysymbol')
        }}:</span
      >
      <Select
        :disabled="disabled"
        clearable
        style="width: 80px"
        @on-change="libDetailDataChange"
        v-model="config.currency"
      >
        <Option
          v-for="item in currencyList"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
    </div>
    <div class="formatter-decnum" v-show="['custom'].indexOf(config.type) > -1">
      <span>{{ $srv.getI18nByPath('piece.oFormatterSetting.suffix') }}:</span>
      <i-input
        @on-blur="libDetailDataChange"
        @on-change="libDetailDataChange"
        v-model="config.custom"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { Tsrv, T_srv, vue } from '@/services';

@T_srv.comp
export default class oFormatterSetting extends vue {
  @T_srv.model('modelchange') config: any;

  @T_srv.prop() formatList!: any;

  @T_srv.prop({
    required: false,
    default: true
  })
  showTitle!: boolean;

  @T_srv.prop({
    required: false
  })
  placeholder!: string;

  @T_srv.prop({
    required: false,
    type: Boolean,
    default: false
  })
  disabled: boolean;

  private currencyList = [
    {
      value: '¥',
      label: '¥'
    },
    {
      value: '$',
      label: '$'
    },
    {
      value: 'US$',
      label: 'US$'
    }
  ];

  mounted() {}

  private libDetailDataChange() {
    this.$emit('modelchange', this.config);
    this.$emit('change');
  }
}
</script>

<style lang="scss" scoped>
.o-formatter-setting {
  width: 100%;
  padding: 0 10px;
  .input {
    span {
      padding: 0;
    }
  }
  .formatter-decnum,
  .formatter-spliter,
  .formatter-currency {
    width: 50%;
    display: flex;
    float: left;
    margin-top: 15px;
    height: 32px;
    line-height: 32px;
    span {
      flex-shrink: 0;
    }
  }
}
</style>
